<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录界面</title>
    <link rel="stylesheet" type="text/css" href="/layui/css/cuom.css" />
</head>
<body>
<div class="login-bg">
    <div class="content">
        <div class="title">
            <h2>标题</h2>
        </div>
        <div class="form-box">
            <div class="login-center">
                <span class="t-name">手机号：</span><input type="text" name="" id="tel_num" class="inp phone-inp"
                                                       value="" placeholder="请输入您的手机号">
            </div>
            <div class="login-center">
                <span class="t-name">验证码：</span><input type="text" name="" id="code_num" class="inp code-inp"
                                                       value="" placeholder="请输入您的验证码">
                <div class="get-code">
                    <span class="code-btn">获取验证码</span>
                </div>
            </div>
            <div class="login-button">登陆</div>
        </div>
    </div>
</div>

<script src="/layui/js/jquery.js"></script>
<script type="text/javascript">
    var code_time = 60;

    function time_inter() {
        $('.code-btn').addClass('code-btn-gray');
        var timeflag = setInterval(function() {
            $('.code-btn-gray').html("" + code_time + "s后获取").css({
                "cursor": "no-",
                "color": "#999"
            });
            code_time--;
            if (code_time == 0) {
                clearInterval(timeflag);
                $('.code-btn-gray').html("获取验证码").css({
                    "cursor": "pointer",
                    "color": "#a07941"
                });
                $('.code-btn').removeClass('code-btn-gray');
            }
        }, 1000)

    }

    //获取验证码点击事件
    $('.code-btn').on('click', function() {
        var data = {};
        if ($(this).hasClass('code-btn-gray')) {
            return false;
        }
        var tel_num = $('#tel_num').val();
        data.phoneNumber = tel_num;
        console.log(data);
        if (tel_num && tel_num.length == 11) {
            $.ajax({
                url: "/customer/senSms",
                type: 'GET',
                data: data,
                success: function(data) {
                    if (data.msg == "success") {
                        alert("发送成功！！");
                    } else {
                        console.error("验证码发送失败,请联系管理员!")
                    }
                }
            });

        } else {
            alert('请输入正确手机号码')
        }
        time_inter(); //按钮倒计时
    });

    //获取验证码点击事件
    $('.login-button').on('click', function() {
        var data = {};
        var phoneNumber = $('#tel_num').val();
        data.phoneNumber = phoneNumber;
        var code = $('#code_num').val();
        data.code = code;
        console.log(data);
        if (phoneNumber.length == 11 && code.length == 6) {
            $.ajax({
                url: "/customer/login",
                type: 'GET',
                data: data,
                success: function(data) {
                    if (data.msg == "success") {
                        alert("发送成功！！");
                        window.location.href="/customerAdmin/main";
                    } else {
                        console.error("验证码发送失败,请联系管理员!")
                    }
                }
            });

        } else {
            alert('请输入正确手机号码，验证码')
        }
    });
</script>

</body>
</html>
